<template>
  <div>
    <div>
      书名：<input type="text" v-model="title" /> 价格：<input
        type="text"
        v-model="price"
      /><button @click="submit">提交</button>
    </div>

    <table border="1">
      <tr>
        <th>标题</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.title }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="edit(item, index)">修改</button
          ><button @click="remove(index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
export default {
  setup(props) {
    const data = reactive({
      list: [
        {
          title: "vue从入门到入土",
          id: 1,
          price: 0.2,
        },
        {
          title: "工资从每分钟1块到每分钟两块五",
          id: 2,
          price: 200000,
        },
        {
          title: "工资从每分钟2块到每分钟5块",
          id: 3,
          price: 200000,
        },
      ],
    });
    //图书列表数据

    const title = ref("");
    //标题的双向数据绑定
    const price = ref("");
    //价格的双向数据绑定
    const isEdit = ref(false);
    //是否编辑
    const editIndex = ref(-1);
    //编辑的数据的下标

    const submit = () => {
      if (isEdit.value == false) {
        data.list.push({
          id: new Date().getTime(),
          //用时间戳作为唯一的id
          title: title.value,
          price: price.value,
        });

        //如果没有点击编辑执行添加操作
      } else {
        data.list[editIndex.value].title = title.value;
        data.list[editIndex.value].price = price.value;
        isEdit.value = false;
      }
      //如果点击了修改按钮 就会执行修改而不是添加 根据保存的修改的这条数据的下标 去修改数据

      title.value = "";
      price.value = "";
    };
    //点击提交按钮的时候 如果是编辑状态（isEdit=true）就是编辑 如果是isEdit=false就是添加状态

    const remove = (index) => {
      data.list.splice(index, 1);
    };
    //根据下标删除

    const edit = (item, index) => {
      isEdit.value = true;

      title.value = item.title;
      price.value = item.price;
      editIndex.value = index;
    };
    //编辑 回填 点了编辑按钮 isEdit.value = true变为编辑状态，往两个input框里回填 ，并且保存要编辑的下标

    return { ...toRefs(data), title, price, submit, remove, edit, editIndex };
  },
};
</script>
